سازگاری قالب وب با تمام مرورگر ها
مشکل بزرگی که خیلی از طراحان سایت باهاش روبرو هستن این عدم سازگاری با مرورگرهای مختلف هست. کاش این سازندگان مرورگر حداقل کاری که میکردن این بود وقتی که یه مرورگر جدید می ساختن مرورگر قدیمی رو فسخ میکردن که دیگه کسی از مرورگر های قدیمی استفاده نکنه و مشکل ما طراحان سایت حل بشه. بازم شرکت موزیلا، خدا خیرش بده بعضی وقتی ها پیام میده تا کاربران فایرفاکس رو به روز کنند. ولی ما طراحان چیکار باید بکنیم تا این مشکلات رو حل کنیم؟ من چند تا راه حل میگم ولی مشکلات زیاده و توی یه پست نمیشه به همشون پرداخت.
من امروز میخوام به مبحث طراحی قالب بپردازم. نکاتی که باید در طراحی قالب بهش بپردازیم:
1) همیشه بهتره قبل از تگ <head> در قالبمون از کد زیر استفاده کنیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
2) در قسمت <head> برای سازگاری قالبمون با فارسی و utf-8 از کد زیر استفاده کنیم:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
3) اگه دقت کنید کدهای html در همه ی مرورگرها یکسان نیست. و یه جور کار نمیکنه.
برای مثال شما از کد line-height برای کم کردن فاصله ی دو خط بالا و پایین استفاده میکنی ولی در کروم فاصله بیشتر هست و در اکسپلورر کمتر. برای حل این مشکلات به این آدرس برید و این روش رو انجام بدید: http://www.keramatifar.ir/ShowTopic.php?id=%2012
در واقع با این روش شما مقادیر کدها رو reset میکنید یا مقدار ثابتی رو براش تعیین میکنید.
4) سعی کنید همیشه وقتی قالبی میسازید حداقل با تمام مرورگر های معروف چون کروم و فایرفاکس و اکسپلورر و اپرا ، سفری ، ... چک کنید تا اگه مشکلی داشت رفعش کنید.
این نکته رو هم بگم که خیلی از کاربران هنوز توی سیستمشون اکسپلورر 6 دارن. برای اینکه قالب رو توی این مرورگر هم تست کنید پیشنهاد میکنم برنامه ی IEtester رو نصب کنید این برنامه نسخه های 5.5 به بالا رو داره و شما میتونید ازش استفاده کنید . شما همچنین میتونید از سایت http://browserling.com/ هم برای چک کردن کدهاتون با دیگر مرورگر های معروف و نسخه های اکسپلورر هم استفاده کنید. و همچنین نمایشگر ها.
5) به غیر از مرورگر ها مشکل دیگه نمایشگر ها هستن. شما باید قالبی که طراحی میکنید با نمایشگر های مختلف هم سازگار باشه. چون ممکنه قالب شما در مانیتور crt مشکلی نداشته باشه ولی در lcd رفته باشه مثلاً سمت چپ . ولی شما متوجه نشید. برای اینکار میتونید از امکاناتی که سمت راست و پایین مرورگرتون هست اون علامت + و - استفاده کنید یا دکمه ی ctrl را نگه داشته و دکمه ی وسط ماوس رو بچرخوانید. اینطوری قالب در مانیتور شما بزرگ و کوچک میشه.
